<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>7.一个简写形式</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="demo"></div>
</body>
<script type="text/javascript">
    //创建一个School 组件
    const School = {
        name: 'School',
        template: ` 
              <div>
                   <h2>学校名称:{{name}}</h2>
                   <h2>学校地址:{{address}}</h2>
                   <button @click = "showMore">展示更多信息</button>
              <div>
                `,
            data() {
                return {
                    name: '尚硅谷',
                    address: '宏福科技园',
                    tel: '010-56253825',
                    city: '北京'
                }
            },
            methods: {
                showMore() {
                    alert(`所在城市${this.city},联系电话:${this.tel}`)
                }
            },
        }
    //创建一个APP组件
    const App = {
        name: 'App',
        components: {
            School
        },
        template: `
               <div>
                    <h2> ****************** </h2>
                    <School/>
                    <h2> ****************** </h2>
                </div>
                `,
    }
        //创建vm
        new Vue({
            el:'#demo',
            components: {
                App
            },
            template: '<App/>'
        })
</script>


</html>